body {
    margin: 0;
    /* 去除页面默认外边距 */
    padding: 0;
    /* 去除页面默认内边距 */
    font-family: 'Segoe UI', 'Arial', sans-serif;
    /* 设置全局字体 */
    /* background: linear-gradient(120deg, #e6f0ff 0%, #f8fbff 100%); */
    /* 设置蓝白渐变
背景 */
    min-height: 100vh;
    /* 最小高度占满视口 */
    background: url('../img/bj.png') no-repeat center/contain;
    background-size:cover;
}

.container {
    display: flex;
    /* 使用flex布局 */
    height: 100vh;
    /* 高度占满视口 */
}

.big_box{
    width: 960px;
    height: 440px;
    margin: auto;
    background: #ffffff;
    /* border-bottom: 3px solid red; */
    /* 关键：让 big_box 内部也用 flex 布局实现左右排列 */
    display: flex; 
    border-radius: 8px; /* 可以加个圆角让外观更好看，可选 */
    overflow: hidden; /* 防止内容溢出圆角，可选 */    
}

.left {
    flex: 1.2;
    /* 左侧占比1.2 */
    display: flex;
    /* flex布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    background: linear-gradient(135deg, #d0e7ff 0%, #f0f6ff 100%);
    /* 左侧蓝白渐变
背景 */
}


.illustration {
    width: 70%;
    /* 插画宽度占父容器70% */
    max-width: 400px;
    /* 最大宽度400px */
    min-width: 250px;
    /* 最小宽度250px */
    height: 350px;
    /* 高度350px */
    background: url('../image/left_logo.png') no-repeat center/contain;
    /* 插画图
片，居中且自适应 */
}

.right {
    flex: 1;
    /* 右侧占比1 */
    display: flex;
    /* flex布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    background: #fff;
    /* 白色背景 */
    box-shadow: -8px 0 32px 0 rgba(0, 60, 255, 0.04);
    /* 右侧阴影 */
}

.login-box,
.register-box {
    height: 100%;
    width: 100%;
    /* 宽度340px */
    background: rgba(243, 246, 248, 0.98);
    /* 半透明白色背景 */
    border-radius: 16px;
    /* 圆角16px */
    box-shadow: 0 8px 32px 0 rgba(0, 60, 255, 0.08);
    /* 盒子阴影 */
    padding: 40px 32px 32px 32px;
    /* 内边距 */
    text-align: center;
    /* 内容居中 */
}

.login-box h2,
.register-box h2 {
    margin-top:50px;
    /* margin-bottom: 150px; */
    /* 标题下边距 */
    color: #222;
    /* 标题颜色 */
    font-size: 2rem;
    /* 标题字号 */
    font-weight: 700;
    /* 标题加粗 */
    letter-spacing: 2px;
    /* 字母间距 */
}

.login-box input[type="text"],
.login-box input[type="password"],
.register-box input[type="text"],
.register-box input[type="password"] {
    width: 100%;
    /* 输入框宽度100% */
    padding: 12px 10px;
    /* 输入框内边距 */
    margin: 10px 0 18px 0;
    /* 输入框上下外边距 */
    border: 1px solid #e0e6ed;
    /* 边框颜色 */
    border-radius: 8px;
    /* 圆角8px */
    background: #f7faff;
    /* 浅蓝背景 */
    font-size: 1rem;
    /* 字体大小 */
    outline: none;
    /* 去除聚焦外边框 */
    transition: border 0.2s;
    /* 边框过渡动画 */
}

.login-box input:focus,
.register-box input:focus {
    border: 1.5px solid #3a8dff;
    /* 聚焦时边框高亮为蓝色 */
}

.login-box .btn,
.register-box .btn {
    width: 100%;
    /* 按钮宽度100% */
    margin: 16px 0 0 0;
    /* 按钮上外边距 */
    padding: 12px 0;
    /* 按钮内边距 */
    background: linear-gradient(90deg, #3a8dff 0%, #005bff 100%);
    /* 蓝色渐变背景
*/
    color: #fff;
    /* 按钮文字白色 */
    border: none;
    /* 无边框 */
    border-radius: 8px;
    /* 圆角8px */
    font-size: 1.1rem;
    /* 字体大小 */
    font-weight: 600;
    /* 字体加粗 */
    cursor: pointer;
    /* 鼠标悬停为手型 */
    transition: background 0.2s;
    /* 背景渐变动画 */
}

.login-box .btn:hover,
.register-box .btn:hover {
    background: linear-gradient(90deg, #005bff 0%, #3a8dff 100%);
    /* 悬停时渐变反转
*/
}

.login-box .links,
.register-box .links {
    margin-top: 18px;
    /* 链接上外边距 */
    display: flex;
    /* flex布局 */
    justify-content: space-between;
    /* 两端对齐 */
}

.login-box .links a,
.register-box .links a {
    color: #3a8dff;
    /* 链接蓝色 */
    text-decoration: none;
    /* 去除下划线 */
    font-size: 1rem;
    /* 字体大小 */
}

.login-box .links a:hover,
.register-box .links a:hover {
    text-decoration: underline;
    /* 悬停时显示下划线 */
}

.error {
    color: #ff4d4f;
    /* 错误提示红色 */
    font-size: 0.95rem;
    /* 字体略小 */
    margin-bottom: 8px;
    /* 下外边距 */
}